<style lang="scss" scoped>
.user-index {
	background-color: #F5F5F5;
	min-height: 100vh;
}

.user-index-user-info {
	padding-top: 130rpx;
}

.user-index-statistics {
	margin-top: 42rpx;
	margin-bottom: 58rpx;
}

.user-service, .user-mine {
	margin-left: 30rpx;
	margin-right: 30rpx;
}

.user-mine {
	padding-top: 75rpx;
}

.user-service {
	padding-top: 35rpx;
}
</style>

<template>
	<view class="user-index">

		<user-header>

			<!-- 用户详情 -->
			<user-info
				class="user-index-user-info block"
				:avatar="userInfo.avatar"
				:nickName="userInfo.nickName"
				:phone="phone"
			></user-info>

			<!-- 用户统计 -->
			<user-statistics
				class="user-index-statistics block"
				:seen="57"
				:save="32.81"
				:ticket="6"
			></user-statistics>

			<!-- 权益未开通 -->
			<!-- <user-equity-false></user-equity-false> -->

			<!-- 权益开通 -->
			<user-equity-true time-due="2019.4.12"></user-equity-true>

		</user-header>

		<!-- 我的 -->
		<user-mine class="user-mine block"></user-mine>

		<!-- 服务 -->
		<user-service class="user-service block"></user-service>

	</view>
</template>

<script>
import UserMine from "./mine";
import UserInfo from "./userinfo";
import UserHeader from "./header";
import UserService from "./service";
import UserStatistics from "./statistics";
import UserEquityTrue from "./equity-true";
import UserEquityFalse from "./equity-false";

import {
	setToken,
	getToken
} from '@/utils/index.js';

export default {
	components: {
		UserMine,
		UserInfo,
		UserHeader,
		UserService,
		UserStatistics,
		UserEquityTrue,
		UserEquityFalse,
	},
	data() {
		return {
			token: getToken()
		}
	},
	computed: {
		userInfo() {
			return this.$store.state.user.userInfo
		},
		phone() {
			let phone = this.userInfo.phone
			return phone ? phone.substr(0, 3) + '****' + phone.substring(7, 11) : ''
		}
	},
	onLoad() {},
	watch: {},
	methods: {
		getToken: getToken,
		goPage(url) {
			this.$api.goPage(url);
		},
		logout() {
			setToken('')
			this.token = ''
			this.$store.commit('setUserInfo', {})
		}
	}
}
</script>